<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepGemini 🌟</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <!-- Sidebar -->
    <nav class="sidebar">
        <button class="sidebar-toggle" onclick="toggleSidebar()">
            <i class="fas fa-chevron-left"></i>
        </button>
        <div class="sidebar-header">
            <h3>DeepGemini 🌟</h3>
        </div>
        <ul class="sidebar-menu">
            <li class="active" data-page="models">
                <i class="fas fa-cube"></i>
                <span data-translate="modelManagement">Model Management</span>
            </li>
            <li data-page="workflows">
                <i class="fas fa-project-diagram"></i>
                <span data-translate="workflowManagement">Workflow Management</span>
            </li>
            <li data-page="settings">
                <i class="fas fa-cog"></i>
                <span data-translate="systemSettings">System Settings</span>
            </li>
        </ul>
        <div class="sidebar-footer">
            <div class="sidebar-footer-controls">
                <div class="control-item language-control">
                    <i class="fas fa-globe"></i>
                    <span data-translate="language">Language</span>
                    <select id="languageSelect" onchange="changeLanguage(this.value)">
                        <option value="en">English</option>
                        <option value="zh">简体中文</option>
                    </select>
                    <div class="language-popup">
                        <select id="languageSelectPopup" onchange="changeLanguage(this.value)">
                            <option value="en">English</option>
                            <option value="zh">简体中文</option>
                        </select>
                    </div>
                </div>
                <div class="control-item dark-mode-control" onclick="toggleTheme()">
                    <i class="fas fa-moon"></i>
                    <span data-translate="darkMode">Dark Mode</span>
                </div>
                <div class="control-item logout-control" onclick="logout()">
                    <i class="fas fa-sign-out-alt"></i>
                    <span data-translate="logout">退出登录</span>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
        <!-- Models Page -->
        <div class="content-page" id="models-page">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 data-translate="modelManagement">Model Management</h2>
                <button class="btn btn-primary" onclick="showAddModelModal()">
                    <i class="fas fa-plus"></i> <span data-translate="addNewModel">Add New Model</span>
                </button>
            </div>
            <div class="row" id="modelsList">
                <!-- Models will be dynamically inserted here -->
            </div>
        </div>

        <!-- Workflows Page -->
        <div class="content-page d-none" id="workflows-page">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-1" data-translate="workflowManagement">Workflow Management</h2>
                    <p class="text-muted" data-translate="workflowDescription">Configure and manage your AI model workflows</p>
                </div>
                <button class="btn add-workflow-btn" onclick="showAddConfigModal()">
                    <i class="fas fa-plus"></i> <span data-translate="addNewWorkflow">Add New Workflow</span>
                </button>
            </div>

            <div class="row" id="configurationsList">
                <!-- Configuration cards will be dynamically inserted here -->
            </div>
        </div>

        <!-- Workflow Visualization Modal -->
        <div class="modal fade" id="workflowVisualizationModal" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" data-translate="visualizeWorkflow">Workflow Visualization</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="workflow-container">
                            <div class="workflow-circle" id="workflowCircle">
                                <!-- Workflow steps will be dynamically inserted here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings Page -->
        <div class="content-page d-none" id="settings-page">
            <div class="settings-container">
                <!-- Settings Sidebar -->
                <div class="settings-sidebar">
                    <div class="settings-nav">
                        <div class="settings-nav-item active" data-section="api-keys" data-translate="apiKeyManagement">API Key Management</div>
                        <div class="settings-nav-item" data-section="general" data-translate="generalSettings">General Settings</div>
                    </div>
                </div>
                
                <!-- Settings Content -->
                <div class="settings-content">
                    <!-- API Keys Section -->
                    <div class="settings-section active" id="api-keys-section">
                        <div class="section-header">
                            <h3 data-translate="apiKeyManagement">API Key Management</h3>
                            <button class="btn btn-primary" onclick="showAddApiKeyModal()">
                                <i class="fas fa-plus"></i>
                                <span data-translate="addNewApiKey">Add New API Key</span>
                            </button>
                        </div>
                        <div class="api-keys-list">
                            <!-- API keys will be dynamically inserted here -->
                        </div>
                    </div>
                    
                    <!-- General Settings Section -->
                    <div class="settings-section" id="general-section">
                        <h3 data-translate="generalSettings">General Settings</h3>
                        <div class="credentials-form">
                            <h4 data-translate="adminCredentials">Admin Credentials</h4>
                            <form id="credentialsForm">
                                <div class="mb-3">
                                    <label class="form-label" data-translate="currentPassword">Current Password</label>
                                    <input type="password" class="form-control" name="current_password" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" data-translate="newUsername">New Username</label>
                                    <input type="text" class="form-control" name="new_username">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" data-translate="newPassword">New Password</label>
                                    <input type="password" class="form-control" name="new_password">
                                </div>
                                <button type="button" class="btn btn-primary" onclick="updateCredentials()">
                                    <span data-translate="updateCredentials">Update Credentials</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Add Model Modal -->
    <div class="modal fade" id="addModelModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" data-translate="addNewModel">Add New Model</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addModelForm">
                        <div class="mb-3">
                            <label class="form-label" data-translate="customName">Custom Name</label>
                            <input type="text" class="form-control" name="name" required 
                                   data-translate="customNamePlaceholder" placeholder="Enter a custom name for this model">
                        </div>
                        
                        <!-- API Configuration -->
                        <div class="mb-3">
                            <label class="form-label">API Key</label>
                            <input type="text" class="form-control" name="api_key" required
                                   placeholder="sk-..."
                                   onchange="handleAPICredentialsChange()">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">API URL</label>
                            <input type="text" class="form-control" name="api_url" required
                                   placeholder="https://api.example.com/v1/chat/completions"
                                   onchange="handleAPICredentialsChange()">
                        </div>

                        <!-- Model Name with Dropdown -->
                        <div class="mb-3">
                            <label class="form-label">Model Name</label>
                            <div class="input-group">
                                <select class="form-select" id="modelNameSelect" onchange="handleModelNameSelect(this)">
                                    <option value="">Please enter API credentials first</option>
                                </select>
                                <input type="text" class="form-control" id="modelNameInput" name="model_name" required
                                       placeholder="Or enter model name manually" style="display: none;">
                                <button class="btn btn-outline-secondary" type="button" onclick="toggleModelNameInput()">
                                    <i class="bi bi-pencil"></i> Toggle Input
                                </button>
                            </div>
                            <div class="form-text" id="modelLoadStatus"></div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Type</label>
                                    <select class="form-select" name="type" required>
                                        <option value="reasoning">Reasoning</option>
                                        <option value="execution">Execution</option>
                                        <option value="both">Both</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Provider[Reasoning model, select the owner]</label>
                                    <select class="form-select" name="provider" required>
                                        <option value="deepseek">DeepSeek</option>
                                        <option value="google">Google</option>
                                        <option value="anthropic">Anthropic</option>
                                        <option value="grok3">Grok3</option>
                                        <option value="oneapi">OneAPI</option>
                                        <option value="openrouter">OpenRouter</option>
                                        <option value="openai-completion">OpenAI compatibility</option>
                                        <option value="腾讯云">腾讯云</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Model Parameters -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Temperature</label>
                                    <input type="number" class="form-control" name="temperature" value="0.7" step="0.1" min="0" max="1">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Top P</label>
                                    <input type="number" class="form-control" name="top_p" value="1.0" step="0.1" min="0" max="1">
                                </div>
                            </div>
                        </div>

                        <!-- Tool Configuration -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="enable_tools" id="enableTools">
                                        <label class="form-check-label" for="enableTools">
                                            启用工具调用
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div id="toolsConfig" style="display: none;">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">工具配置 (JSON格式)</label>
                                        <textarea class="form-control" name="tools" rows="4" placeholder='[{
    "name": "get_weather",
    "description": "获取指定位置的当前天气",
    "input_schema": {
        "type": "object",
        "properties": {
            "location": {
                "type": "string",
                "description": "城市和州，例如 San Francisco, CA"
            }
        },
        "required": ["location"]
    }
}]'></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">工具选择配置 (JSON格式)</label>
                                        <textarea class="form-control" name="tool_choice" rows="2" placeholder='{"type": "any"}'></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Thinking Configuration -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="enable_thinking" id="enableThinking">
                                        <label class="form-check-label" for="enableThinking">
                                            启用扩展思考
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div id="thinkingConfig" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">思考Token预算</label>
                                        <input type="number" class="form-control" name="thinking_budget_tokens" value="16000" min="1000" step="1000">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Presence Penalty</label>
                                    <input type="number" class="form-control" name="presence_penalty" 
                                           value="0.0" step="0.1" min="-2" max="2"
                                           title="Penalizes new tokens based on whether they appear in the text so far">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Frequency Penalty</label>
                                    <input type="number" class="form-control" name="frequency_penalty" 
                                           value="0.0" step="0.1" min="-2" max="2"
                                           title="Penalizes new tokens based on their frequency in the text so far">
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Max Tokens</label>
                            <input type="number" class="form-control" name="max_tokens" 
                                   value="2000" step="1" min="1"
                                   title="The maximum number of tokens to generate">
                        </div>

                        <!-- 在模型表单中添加自定义参数部分 -->
                        <div class="mb-3">
                            <label class="form-label" data-translate="customParameters">Custom Parameters</label>
                            <div id="customParametersContainer">
                                <!-- 自定义参数将动态添加到这里 -->
                            </div>
                            <button type="button" class="btn btn-secondary mt-2" onclick="addCustomParameter()">
                                <i class="bi bi-plus"></i> <span data-translate="addParameter">Add Parameter</span>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveModel()">Save Model</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Configuration Modal -->
    <div class="modal fade" id="addConfigModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Configuration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addConfigForm">
                        <input type="hidden" name="config_id">
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="is_active" value="true" checked>
                                <label class="form-check-label">Active</label>
                            </div>
                        </div>
                        
                        <div id="configSteps">
                            <!-- 步骤将动态添加到这里 -->
                        </div>
                        
                        <button type="button" class="btn btn-primary mb-3" onclick="addConfigurationStep()">
                            Add Step
                        </button>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="saveConfiguration()">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Add API Key Modal -->
    <div class="modal fade" id="addApiKeyModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" data-translate="addNewApiKey">Add New API Key</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addApiKeyForm">
                        <div class="mb-3">
                            <label class="form-label" data-translate="apiKey">API Key</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="api_key" required
                                       placeholder="sk-api-...">
                                <button class="btn btn-outline-secondary" type="button" onclick="generateApiKey()">
                                    <i class="fas fa-magic"></i>
                                    <span data-translate="generate">Generate</span>
                                </button>
                            </div>
                            <div class="form-text" data-translate="apiKeyFormat">
                                Format: sk-api-xxxxxxxxxx
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" data-translate="description">Description</label>
                            <input type="text" class="form-control" name="description"
                                   placeholder="Enter a description for this API key">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="close">Close</button>
                    <button type="button" class="btn btn-primary" onclick="saveApiKey()" data-translate="save">Save</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>